<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙虾直播</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="../themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="http://wanjia.mcooz.com/views/mobile_basic/skin/default/css/mobile.css" />
    <link rel="stylesheet" href="../themes/orange.min.css" />
  
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/jquery/jquery-1.11.3.min.js"></script><script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://wanjia.mcooz.com/views/mobile_basic/javascript/mobile.js"></script>
    <link rel="stylesheet" href="http://wanjia.mcooz.com/views/mobile_basic/skin/default/css/index.css" />
      <link href="../font/css/font-awesome.css" rel="stylesheet">
      <script type="text/javascript" charset="UTF-8" src="http://www.mcooz.com/PUBLIC/artTemplate/artTemplate.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://www.mcooz.com/PUBLIC/artTemplate/artTemplate-plugin.js"></script>
    <script type="text/javascript" src="http://wanjia.mcooz.com/views/mobile_basic/javascript/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
       <script src="../dist/smooth-scrollbar.js"></script>
    <script type="text/javascript">
        var $ = jQuery.noConflict();
        $(window).load(function() {
   
        });
        //$.mobile.ajaxEnabled=false;



    </script>
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/form/form.js"></script>
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/autovalidate/validate.js"></script>
    <link rel="stylesheet" type="text/css" href="http://wanjia.mcooz.com/runtime/_systemjs/autovalidate/style.css" />
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artdialog/artDialog.js"></script><script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artdialog/plugins/iframeTools.js"></script><link rel="stylesheet" type="text/css" href="http://wanjia.mcooz.com/runtime/_systemjs/artdialog/skins/aero.css" />
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artTemplate/artTemplate.js"></script><script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artTemplate/artTemplate-plugin.js"></script>

     <script type="text/javascript" src="../script/touch.min.js"></script>
 <script src="../script/jquery-ui-1.10.4.min.js"></script>
 <script src="../script/jquery.mousewheel.min.js"></script>
  <script type="text/javascript" src="../script/jquery.mCustomScrollbar.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />

 <link rel="stylesheet" type="text/css" href="../css/jquery.mCustomScrollbar.css" />
     
</head>
<body>
<div data-role="page"  id="infinite-scroll" class="content">

    <style>
.col-md-10.col-xs-10.column.left.pd5 > div {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-md-10.col-xs-10.column.left.pd5 {
    padding-left: 0;
}

.slides img {
    min-height: 190px;
    width: 100%;
}

.text-area {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

#kros_header {
    display: none;
}

#loading {
  margin: 50px auto 0;
  width: 100%;
  padding-left: 42%;
}
#loading i{
    color:#ff7700;
}

.col-md-6.col-xs-6.kros_overfollow {
  padding-left: 3px;
  padding-right: 3px;
}
.kros_img{
    height:106px;
       -moz-border-radius: 0px; 

    -webkit-border-radius: 0px; 

    border-radius:0px;   
}
.kros_overflow{
     border: 1px solid #000000;

  
}
.caption{
    font-size: 12px;
}

.room-mes .btn-group .focus-box .follow-btn {
  background-color: #f70;
  border: 1px solid #e5e5e5;
  border-radius: 18.5px 0 0 18.5px;
  color: #fff;
  height: 25px;
  line-height: 25px;
  width: 69px;
}

.content {
  background: none;
  /*height: 900px;*/
  width: 500px;
  margin: 0px;
  max-width: 100%;
  overflow: auto;
  padding: 0px;
  position: relative;
}
/* .mCSB_scrollTools {
  
  width: 1px;
}
.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical {
  margin: 0px 0;
  right: 0;
  width: 0;
}
.mCSB_scrollTools{

    width:0;
} */
</style>

<div>
    <div  class=" kros_content">
        <div class="ui-grid-solo flexslider" style="max-height:190px" id="banner">
                <ul class="slides" id="banner_hax">
                        <script type='text/html' id='bannerTemplate'>
                                <li> <img tapmode onclick="goToPageRoom('room.html',<%=uid%>);" src="<%=banner%>" alt="">
                                 <p class="slider-description"></p>
                             </li>
                         </script>
                </ul>
                    </div>
        <div class="ui-grid-a">
            <div class="ui-grid-solo">
                <div class="ui-bar ui-bar-a" style="max-height:30px">
                    <p>龙虾直播</p>
                </div>
            </div>
        </div>
    </div>
    <div class="ui-content1 kros_content" >
        <!--菜单 开始-->
        <div class="row row_category " style="margin-top:15px;" id="swipe">
            <div class="row clearfix" style="padding-left:15px;padding-right:15px">
                <div class="col-md-3 col-xs-3 column  kros_li">
                    <div class="text-center">
                        <a data-ajax="false" tapmode onclick="SwitchBtn(4)">
                            <span class="fa-stack fa-lg kros_span">
                        <i class="fa fa-circle fa-stack-2x kros_i" style="color:#ffb700"></i>
                        <i class="fa fa-trophy fa-stack-1x fa-inverse "></i>
                    </span>
                        </a>
                        <p>排行榜</p>
                    </div>
                </div>
                <div class="col-md-3 col-xs-3 column kros_li">
                    <div class="text-center">
                        <a data-ajax="false" onclick="SwitchBtn(5)">
                            <span class="fa-stack fa-lg kros_span">
                        <i class="fa fa-circle fa-stack-2x kros_i" style="color:#ff67b9"></i>
                        <i class="fa fa-envelope-o fa-stack-1x fa-inverse "></i>
                    </span>
                        </a>
                        <p>消息</p>
                    </div>
                </div>
                <div class="col-md-3 col-xs-3 column kros_li">
                    <div class="text-center">
                        <a data-ajax="false" onclick="SwitchBtn(6)">
                            <span class="fa-stack fa-lg kros_span">
                        <i class="fa fa-circle fa-stack-2x kros_i" style="color:#56b2ff"></i>
                        <i class="fa fa-bell-o fa-stack-1x fa-inverse "></i>
                    </span>
                        </a>
                        <p>活动</p>
                    </div>
                </div>
                <div class="col-md-3 col-xs-3 column kros_li">
                    <div class="text-center">
                        <a data-ajax="false" onclick="SwitchBtn(7)">
                            <span class="fa-stack fa-lg kros_span">
                        <i class="fa fa-circle fa-stack-2x kros_i" style="color:#ff6d57"></i>
                        <i class="fa fa-video-camera fa-stack-1x fa-inverse "></i>
                    </span>
                        </a>
                        <p>全部直播</p>
                    </div>
                </div>
            </div>
        </div>
        <!--菜单 结束-->
                <span class="fa fa-paperclip"></span>
        <div class="yui3-u-20-24 kros_t">最热</div>
        <div class="container">
            <div class="row kros_margin"  id="krosrow1">
             
 <script type='text/html' id='deliveInfoTemplate1'>
                              <div class="col-md-6 col-xs-6 kros_overfollow">
                    <div class="kros_overfollow">
                        <a id="kros_a" tapmode onclick="goToPageRoom('room.html',<%=uid%>);"  ><img class="kros_img  " src="http://www.mcooz.com/upload/images/<%=uid%>.jpg" alt=""></a>
                    </div>
                    <div class="row clearfix">
                        <div class="col-md-12 col-xs-12 column left ">
                            <div class="caption"><%=nicheng%>  ： <%=title%></div>
                            
                        </div>
                       
                    </div>
                </div>
            </script>
 
                            </div>
        </div>

    </div>
  </div>
   


   <!--  <div data-role="panel" id="kros_panel" data-position="left" data-display="push" data-theme="a">
                <div class="row clearfix">
            <div class="col-md-12 column">
                <h1 class="text-center">
                    龙虾直播                    </h1>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
            
                    <div class="form-group">
                        <input data-corners="false" class="form-control" name="username" id="username" placeholder="用户名" type="text"   />
                    </div>
                    <div class="form-group">
                        <input data-corners="false" class="form-control" name="password" id="password" placeholder="密码" type="password" />
                    </div>
                    <button type="submit" id="submit" data-corners="false" class="btn ">登录</button>
            
                <h5 class="text-center">
                    <a href="reg.html"  data-transition="slide">还没有账号?点此注册</a>
                    </h5>
            </div>
        </div>
            </div> -->








</div>






<script type='text/html' id='userCenterTemplate'>
 <div class="ui-panel-inner"><ul data-role="listview" data-theme="b" class="kros_view ui-listview ui-group-theme-b">
            <li class="ui-first-child"><a data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-user" href="ucenter.html"><%=username%>的个人中心</a></li>
            <li><a data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-heart" href="favorite.html" data-transition="slidefade">我的关注</a></li>
      
            <li><a data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-power" id="log_out" onclick="log_out();">安全退出</a></li>
            <li class="ui-last-child"> <a data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-minus" href="#demo-links" data-rel="close">关闭</a></li>
        </ul></div>

    </script>

<script type='text/html' id='logTemplate'>
    <div class="ui-panel-inner"><div class="row clearfix">
            <div class="col-md-12 column">
                <h1 class="text-center">
                    龙虾直播                    </h1>
            </div>
        </div><div class="row clearfix">
            <div class="col-md-12 column">
            
                    <div class="form-group">
                        <div class="ui-input-text ui-body-inherit ui-shadow-inset"><input data-corners="false" class="form-control" name="username" id="username" placeholder="用户名" type="text"></div>
                    </div>
                    <div class="form-group">
                        <div class="ui-input-text ui-body-inherit ui-shadow-inset"><input data-corners="false" class="form-control" name="password" id="password" placeholder="密码" type="password"></div>
                    </div>
                    <button type="submit" id="submit" onclick="login();" data-corners="false" class="btn  ui-btn ui-shadow">登录</button>
            
                <h5 class="text-center">
                    <a href="reg.html" data-transition="slide" data-ajax="false" class="ui-link">还没有账号?点此注册</a>
                    </h5>
            </div>
        </div></div>
 </script>

<script type='text/html' id='loadingTemplate'>
<div id="loading">
<i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
<span class="sr-only">Loading...</span>

</div>
</script>

</body>
</html>

<script>


   function SwitchBtn(index) {

         api.setFrameGroupIndex({
            name: 'group',
            index: index
        });

     }
//页面跳转函数
function goToPage(page){
         api.openWin({
                                        name: 'live',
                                        url: page,
                                        pageParam: {
                                            name: 'test'
                                        },
                                      animation:  {
                                        type:"push",                //动画类型（详见动画类型常量）
                                        subType:"from_right",       //动画子类型（详见动画子类型常量）
                                        duration:200                //动画过渡时间，默认300毫秒
                                    }

                                });
         }


function login () {  

                var submit = $api.dom('#submit');
                var username;
                var password ;    




                username= $api.dom('#username');
                password = $api.dom('#password');
                username=$api.val(username);
                password=$api.val(password);


if (''==username||''==password) {
    alert("用户名或者密码不能为空")
} else{


url = 'http://www.mcooz.com/Login/login_act_app';
api.ajax({
            url: url,
            method: 'post',
            data: {
                values: {
                    username: username,
                    password:password
                }
            }
        }, function(json, err) {

           // alert(json.user_id);
                    if (json.status!=10) {
                                if (json.status==1) {

                                    $api.setStorage('userArr', json);
                                    $api.setStorage('uid', json.user_id);
                                    $api.setStorage('token', json.token);
                                    uid= $api.getStorage('uid');
                                    token= $api.getStorage('token');
                                    userArr= $api.getStorage('userArr');

                                    id=userArr.user_id;
                                    username=userArr.username;
                                   // alert(username);

                                     var userCenterHtml = template.render('userCenterTemplate',json);




                                $('#kros_panel').empty().append(userCenterHtml);


                                }
                                else{
                                    alert(json.message)


                                }

            ;

                          }else{

                                    alert(json.message)
                          }


        });

};





}


function log_out () {  

     var log_out = $api.dom('#log_out');

$api.setStorage('userArr', '');

url = 'http://www.mcooz.com/Login/logout_app';
api.ajax({
            url: url,
            method: 'post',
            data: {
                values: {
                    username: "a",
                   
                }
            }
        }, function(json, err) {

           // alert(json.user_id);

            if (json.status==11) {


                    var logHtml = template.render('logTemplate',json);



                    $('#kros_panel').empty().append(logHtml);


            };

      

        });
}





var url = 'http://www.mcooz.com/index/recommend';
 

var appId = "A6948423168911";


 apiready = function(){

api.parseTapmode();
var winWidth = api.winWidth;
var winHeight = api.winHeight;
var content_height;



setms(winWidth);





    
     var loadingHtml = template.render('loadingTemplate',1);
            $('#krosrow1').append(loadingHtml);




        userArr= $api.getStorage('userArr');
        //alert(userArr);
       // uid=userArr.user_id;
/*console.log(uid);
       alert(uid)*/
       //判断uid是否定义,也可用判断userArr是否为空作为条件
        

         if (userArr) {



 var userCenterHtml = template.render('userCenterTemplate',userArr);




            $('#kros_panel').empty().append(userCenterHtml);



            }else{

                 var logHtml = template.render('logTemplate',userArr);

                 $('#kros_panel').empty().append(logHtml);



            };


api.ajax({
            url: url,
            method: 'get',
            data: {
                values: {
                    ling: 1
                }
            }
        }, function(json, err) {

        var json2=json

        $('#loading').remove();

            for(var item in json2)
        {
          // alert(item)
            //
            //console.log(1);

            //console.log(item);

            var deliveRowHtml1 = template.render('deliveInfoTemplate1',json2[item]);
            $('#krosrow1').append(deliveRowHtml1);


        }

        });



//获取banner
var bannerurl = 'http://www.mcooz.com/index/banner';
api.ajax({
            url: bannerurl,
            method: 'get',
            data: {
                values: {
                    ling: 1
                }
            }
        }, function(json, err) {

        var json2=json


            for(var item in json2)
        {
         // alert(item)
            //
            //console.log(1);

            //console.log(item);

            var deliveRowHtml1 = template.render('bannerTemplate',json2[item]);
            
            $('#banner_hax').append(deliveRowHtml1);

        }


     $('.flexslider').flexslider({
        animation: "slide",
        directionNav: false,
        animationLoop: true,
        controlNav: false,
        slideToStart: 0,
        slideshow: true,
        animationDuration: 300
        });
        });


//获取坐标
/*$('#banner').on('touchstart',function(e) {
　　var _touch = e.originalEvent.targetTouches[0];
　　var _x= _touch.pageX;

alert(_x);
});*/



//手势
/*touch.on('#swipe', 'touchstart', function(ev){
    ev.preventDefault();
});*/

var target = document.getElementById("swipe");
//target.style.webkitTransition = 'all ease 0.2s';

/*touch.on(target, 'swiperight', function(ev){
$( "#kros_panel" ).panel( "open" );
});
*/


touch.on("#krosrow1", 'swiperight', function(ev){
    
//鼠标位移
    var _touch = ev.position
   　　var _x= _touch.x;
   var _y= _touch.y;

        //alert(_x);
        //
        if (_x>120 && _y<110 ) {
$( "#kros_panel" ).panel( "open" );
}
});

touch.on("#banner", 'swipedown', function(ev){


      $('#krosrow1').empty().append(loadingHtml);
api.ajax({
            url: url,
            method: 'get',
            data: {
                values: {
                    ling: 1
                }
            }
        }, function(json, err) {


      

        var json2=json

$('#loading').remove();

            for(var item in json2)
        {
          // alert(item)
            //
            //console.log(1);

            //console.log(item);

            var deliveRowHtml1 = template.render('deliveInfoTemplate1',json2[item]);
            $('#krosrow1').append(deliveRowHtml1);


        }

        });
});




/*function eventHandler(event_, obj) {

    //alert(1)
  $( "#kros_panel" ).panel( "open" );

}

function eventHandler1(event_, obj) {

//alert(1)
$( "#kros_panel" ).panel( "close" );


}

$('#swipe').bind('swiperight swiperightup swiperightdown',eventHandler); 

$('#kros_panel').bind('swipeleft swipeleftup swipeleftdown',eventHandler1); */

/*
api.setRefreshHeaderInfo({
    loadingImg: 'widget://image/refresh.png',
    bgColor: '#ccc',
    textColor: '#fff',
    textDown: '下拉刷新...',
    textUp: '松开刷新...'
}, function(ret, err) {
    //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
api.ajax({
            url: url,
            method: 'get',
            data: {
                values: {
                    ling: 1
                }
            }
        }, function(json, err) {


      

        var json2=json


$('#krosrow1').empty();
            for(var item in json2)
        {
          // alert(item)
            //
            //console.log(1);

            //console.log(item);

            var deliveRowHtml1 = template.render('deliveInfoTemplate1',json2[item]);
            $('#krosrow1').append(deliveRowHtml1);


        }

        });
api.refreshHeaderLoadDone()
});*/





/* var log_out = $api.dom('#log_out');

$api.addEvt(log_out, 'click', function(){

//alert(1)
$api.setStorage('userArr', '');

url = 'http://www.mcooz.com/Login/logout_app';
api.ajax({
            url: url,
            method: 'post',
            data: {
                values: {
                    username: "a",
                   
                }
            }
        }, function(json, err) {

           // alert(json.user_id);

            if (json.status==11) {


                    var logHtml = template.render('logTemplate',json);



                    $('#kros_panel').empty().append(logHtml);


            };

      

        });




});*/


};



function myCustomFn(el){
}  

function fnOpenWin () {
    api.openWin({
        name: 'a',
        url: 'all.html',
        pageParam: {
            name: 'test'
        },
          animation:  {
                                        type:"none",                //动画类型（详见动画类型常量）
                                  
                                        duration:1                //动画过渡时间，默认300毫秒
                                    }
    });
}
 function funIniGroup(){
       // var eHeaderLis = $api.domAll('header li'),
            frames = [];
        for (var i = 0,len = 1; i < len; i++) {
                frames.push( { 
                    name: 'frame'+i, 
                    url: './html/frame'+i+'.html', 
                    bgColor : 'rgba(0,0,0,.2)',
                    bounces:true
                } )
        }
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0, 
                y: $api.dom('#header').offsetHeight, 
                w: api.winWidth, 
                h: $api.dom('#target').offsetHeight
            },
            index: 0,
            frames: frames
        }, function (ret, err) {

        });
    }

function goToPage_(page){
       var browser = api.require('webBrowser');
browser.open({
    url: page,
    progress:{
        color:'rgba(0,0,0,0)'
      },
    titleBar:{
        visible: false     
  }
});
}


function goToPageRoom(page,val){
         api.openWin({
                                        name: 'room',
                                        url: page,
                                        pageParam: {
                                            id: val
                                        },
                                      animation:  {
                                        type:"push",                //动画类型（详见动画类型常量）
                                        subType:"from_right",       //动画子类型（详见动画子类型常量）
                                        duration:100                //动画过渡时间，默认300毫秒
                                    }

                                });
         }

    function setms(winWidth){
//获取content高度
var contentrurl = 'http://www.mcooz.com/index/content_height';
api.ajax({
            url: contentrurl,
            method: 'get',
            data: {
                values: {
                    ling: 1
                }
            }
        }, function(json, err) {

            var json2=json
            // alert(json2.ext);
   //设置mCustomScrollbar
$(".content").css({ width:winWidth,height:json2.ext});

                 $("#infinite-scroll").mCustomScrollbar({
                   
                    axis:"y",
                    scrollInertia:550,
                    autoHideScrollbar: true,
                    scrollbarPosition: "outside",
                    documentTouchScroll: true,
                    contentTouchScroll: 10, 
                    scrollEasing: "easeOut",
                    snapAmount:58,
                    timeout:1000



                });
           });




    }
//使用smooth scrollbar
//           var Scrollbar = window.Scrollbar;
 
//   Scrollbar.init(document.querySelector('#infinite-scroll', {
//   damping: 0.9,
//   alwaysShowTracks:false,
//   continuousScrolling:true
// }));
// 
// $('window').scroll(function() {
//     if ($('html,body').scrollTop() > 100) {
//         $(".content").animate({
//             marginTop : '500px'
//         }, 1000, 'easeOutBounce');
//     }

 
// });
</script>